<script setup lang="ts"></script>

<template>
  <view>
    <view
      class="rounded-lg bg-white p-4 mt-4 flex justify-between h-[105px] items-center box-border"
    >
      <view class="flex flex-col">
        <wd-text text="菜品销量" size="14px" color="#333"></wd-text>
        <wd-text text="297" size="20px" color="#333" bold></wd-text>
      </view>
      <view class="flex flex-col">
        <wd-text text="退菜数量" size="14px" color="#333"></wd-text>
        <wd-text text="8" size="20px" color="#333" bold></wd-text>
      </view>
      <view class="flex flex-col">
        <wd-text text="赠菜数量" size="14px" color="#333"></wd-text>
        <wd-text text="3" size="20px" color="#333" bold></wd-text>
      </view>
    </view>
    <!--    退菜菜品排行 start    -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="退菜菜品排行" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
    </view>
    <!--    退菜菜品排行 end    -->

    <!--    畅销菜品排行 start    -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="畅销菜品排行" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
    </view>
    <!--    畅销菜品排行 end    -->

    <!--    畅销菜类排行 start    -->
    <view class="mt-3 rounded-xl bg-white">
      <view class="flex items-center justify-between px-[15px] py-[10px]">
        <wd-text text="畅销菜类排行" size="18px" color="#333" bold>
          <template #prefix>
            <wd-icon name="picture" size="22px" class="mr-1" />
          </template>
        </wd-text>
      </view>
    </view>
    <!--    畅销菜类排行 end    -->
  </view>
</template>

<style scoped lang="scss"></style>
